<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏</title>
		<style>
			*{
				font:16px "微软雅黑";
				/* 去掉无序列表样式,针对一项列表项标记 */
				list-sty le-type: none;
				/* 去掉无序列表样式 针对三项   1.列表项标记list-style-type 
				                             2.列表项位置list-style-position
											 3.列表项图片list-style-image
										以上三项所有的效果，去掉
				*/
				list-style: none;
				/* 去掉内外边距：  ul  li 存在外边距 */
				margin: 0;
				padding: 0;
			}
			aside{
				width: 235px;
				height: 460px;
				background: #ffebf3;
				/* 盒子模型：外边距 */
				margin: 20px 200px;
				}
				aside ul.ul_sidebar li{
					width: 235px;
					height: 46px;
					text-align: center;
					line-height: 46px;
					/* 挂靠位【固定】 使用相对定位 */
					position: relative;
					
				}
				aside ul.ul_sidebar li:hover{
					background: #c9fff6;
					
			}
			/* 挂靠点【活动】 使用绝对定位 按照父级位置定位*/
			aside ul.ul_sidebar div.out{
				width: 400px;
				height: 460px;
				border:1px solid red;
				/* 绝对定位 */
				position: absolute;
				left: 435px;
				/* 默认隐藏 搞不定【jQuery】*/
				display: block;
				
			}
		</style>
	</head>
	<body>
		<!-- html结构外层div .sidebar 
		    html结构标记：aside元素语义化元素，表示左栏、侧边栏、广告
			有利于SEO优化
			通常代替div+id/class
			内层ul.ul_sidebar li*10
			内容参照京东左栏第一个
		css结构：内部引入方式
		        通配选择器--合理添加
				外层aside 235*460 背景色
				内层每个li加宽高 235*46
				内层文本垂直居中  文字16px
				鼠标移动上去li，背景色改变
				
				
			-->
	<aside>
		<ul class="ul_sidebar">
			<!-- 弹出框，模式：div+别名 -->
			<div class="out"></div>
			<li>手机</li>
			<li>电脑</li>
			<li>家居</li>
			<li>男装</li>
			<li>美妆</li>
			<li>女鞋</li>
			<li>房产</li>
			<li>母婴</li>
			<li>食品</li>
			<li>男鞋</li>
		</ul>
	</aside>
	</body>
</html>